<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar title="个人信息编辑" left-arrow @click-left="$router.back()">
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <van-icon name="wap-home-o"  @click="$router.push('/index')"/>
      </template>
    </van-nav-bar>
    <!-- 头像部分 -->
    <div class="head_img">
      <img :src="userinfo.head_img | joinPath" alt="" />
      <van-uploader :after-read="after_head_img" />
    </div>
    <!--内容部分 -->
    <!-- 昵称 -->
    <van-cell
      title="昵称"
      @click="showNicknameFn"
      is-link
      :value="userinfo.nickname"
    />
    <!-- 弹出层nickname -->
    <van-dialog
      v-model="showNickname"
      title="标题"
      show-cancel-button
      :beforeClose="beforeNicknameFn"
    >
      <van-cell-group>
        <van-field
          v-model="nickname"
          required
          label="用户名"
          placeholder="请输入用户名"
        />
      </van-cell-group>
    </van-dialog>
    <!-- 密码部分 -->
    <van-cell title="密码" @click="passwordShowFn" is-link value="******" />
    <!-- 密码修改弹框 -->
    <van-dialog
      :beforeClose="beforePassword"
      v-model="passwordShow"
      title="标题"
      show-cancel-button
    >
      <!-- 旧密码 -->
      <van-field
        v-model="oldPassword"
        required
        label="旧密码"
        placeholder="请输入旧密码"
      />
      <!-- 新密码 -->
      <van-field
        v-model="newPassword"
        required
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- 性别 -->
    <van-cell
    @click="genderFn"
      title="性别"
      is-link
      :value="userinfo.gender == 1 ? '男' : '女'"
    />
    <!-- 性别修改弹框 -->
    <van-popup v-model="genderShow" position="bottom">
      <van-button type="primary" block @click="editGenderFn('1')"
        >男</van-button
      >
      <van-button type="primary" block @click="editGenderFn('0')"
        >女</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { userInfo, user_update } from "@/api/user";
import { upload } from "@/api/common";
export default {
  data() {
    return {
      userinfo: {},
      id: localStorage.getItem("my-hm-id"),
      showNickname: false,
      nickname: "",
      passwordShow: false,
      oldPassword: "", //旧密码
      newPassword: "", //新密码
      originalPassword: "", //原密码
      genderShow:false,//性别的弹框
    };
  },
  created() {
    userInfo(this.id).then((res) => {
      console.log(res);
      this.userinfo = res.data.data;
      this.nickname = res.data.data.nickname; //保存用户名
      this.originalPassword = res.data.data.password;
    });
  },
  methods: {
    // 用户名的弹窗显示
    showNicknameFn() {
      this.showNickname = true;
    },
    //   文件上传的回调，将其保存，发送请求，修改成功
    after_head_img(file) {
      // 上传文件需要将其放入到FormData对象中，让这个对象帮我们上传
      let fd = new FormData();
      fd.append("file", file.file);

      console.log("文件上传成功", file);

      upload(fd).then((res) => {
        console.log(res);
        // 编辑上传图像

        user_update(this.id, { head_img: res.data.data.url }).then((res) => {
          console.log("我上传了文件", res);
          this.userinfo.head_img = res.data.data.head_img;
        });
      });
    },
    // 昵称更改 beforeNicknameFn
    beforeNicknameFn(action, done) {
      // done();
      if (action === "confirm") {
        let reg = /^.{1,}$/;
        if (!reg.test(this.nickname.trim())) {
          // 利用组件的回调函数===》action里头保存着，确认按钮和取消按钮，我们只需要针对确认修改做改变===》done（）表示为关闭  done（false）表示不关闭窗口
          this.$toast.fail({
            message: "请重新输入正确的昵称",
            icon: "fire-o",
          });
          // 让其显示原始的密码
          this.nickname = this.userinfo.nickname;
          done(false);
          return;
        } else {
          done();
        }
        // 请求数据，修改数据
        this.editDataFn(this.id, { nickname: this.nickname }, done);
      }
      done();
    },
    // 密码修改
    passwordShowFn() {
      this.passwordShow = true;
    },
    // 密码弹窗
    beforePassword(artion, done) {
      let reg = /^.{3,}$/;
      // artion===confirm确认按钮====cancel===取消按钮
      // 判断用户是否输入错误的密码
      if (artion == "confirm") {
        // 旧密码的校验
        if (!reg.test(this.oldPassword)) {
          this.$toast.fail({
            message: "请重新输入3位数以上的原密码",
            icon: "fire-o",
          });
          done(false);
          return;
        }
        // 新密码的校验
        if (!reg.test(this.newPassword)) {
          this.$toast.fail({
            message: "请重新输入3位数以上的新密码",
            icon: "fire-o",
          });
          done(false);
          return;
        }
        // 旧密码输入是否和原密码匹配
        if (this.oldPassword !== this.originalPassword) {
          this.$toast.fail({
            message: "原密码输入不正确",
            icon: "fire-o",
          });
          done(false);
          return;
        }
        //原密码和旧密码一样，修改不成功
        if (this.oldPassword == this.newPassword) {
          this.$toast.fail({
            message: "新密码和原密码相同",
            icon: "fire-o",
          });
          done(false);
          return;
        }
        // 以上都ok，进行密码修改
        this.editDataFn(this.id, { password: this.newPassword }, done);
      } else {
        done();
      } //里面传递false为不关闭按钮
      console.log(artion, done);
    },
    // 性别修改弹框
    genderFn(){
    this.genderShow=true
    },
    editGenderFn(gender){
      this.genderShow=false
      console.log(gender);
     this.editDataFn(this.id,{gender:gender})
    },
    // 请求数据的封装(修改数据)
    editDataFn(id, obj, done) {
      // this.id  ,{ nickname: this.nickname }
      user_update(id, obj).then((res) => {
        console.log(res);
        this.userinfo.nickname = res.data.data.nickname;
        this.userinfo.gender=res.data.data.gender
        this.$toast.success({
          message: res.data.message,
          icon: "fire-o",
        });
        if(done){
          done();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  color: #000;
  font-size: 20px;
}
//  /deep/ 样式穿透，专门用来设置组件内部样式的属性
/deep/ .van-nav-bar__left {
  i {
    color: #000;
  }
}
.van-nav-bar {
  border-bottom: 2px solid #ddd;
}
// 头像
.head_img {
  width: 30%;
  height: 100px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
// 内容
.van-cell {
  border-bottom: 1px solid #e6e6e6;
}
// 文件上传样式
/deep/ .van-uploader {
  width: 100%;
  height: 100%;
  opacity: 0;
  .van-uploader__wrapper,
  .van-uploader__upload {
    width: 100%;
    height: 100%;
  }
}
// 性别修改弹框
// .van-popup {
//   border-radius: 20px 20px 0 0;
// }
.van-button {
  color: #000;
  background-color: #fff;
  border: none;
}
</style>